<template>
	<view class="select_requ">
		<editDataTop data="择偶要求"></editDataTop>
		<!-- 择偶要求编辑 -->
		<view class="fillin">
			<u-cell-group :border="false">
				<u-cell :title="item.title" v-for="item in CellInfo" :key="item.title">
					<template #value >
						<view :style="{'width':'100rpx'}">
							<u--input :placeholder="item.placeholder?item.placeholder:'不限'" border="none" v-model="item.value"></u--input>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 点击保存 -->
		<view class="deposit">
			<u-button @click="preserve" customStyle="width:150rpx;height:25px;borderRadius: 5px;" text="保存" color="#1afa29"></u-button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive,ref } from "vue";
import { ideal_infoReq,ideal_info_saveReq } from "../../api/user";
	// 择偶要求
	const idealData=ref({})
	// cell列表
	const CellInfo=reactive([
		{title:'年龄',value:'',name:'age'},
		{title:'身高',value:'',name:'height'},
		{title:'婚姻状况',value:'',name:'marital'},
		{title:'学历',value:'',name:'education'},
		{title:'职业',value:'',name:'profession'},
		{title:'薪酬',value:'',name:'salary'},
		{title:'户口',value:'',name:'reg_address'},
		{title:'住房情况',value:'',name:'house'},
		{title:'购车情况',value:'',name:'car'},
		{title:'现居地址',value:'',name:'cur_address'},
		{title:'是否吸烟',value:'',name:'smoke'},
		{title:'是否饮酒',value:'',name:'drink'},
	])
	onMounted(async()=>{
		let res=await ideal_infoReq()
		idealData.value=res.data.data
		for(let key in idealData.value){
			CellInfo.forEach(item=>{
				if(item.name==key){
					item.value=idealData.value[key]
				}	
			})
		}
	})
	// 点击了保存
	const preserve=async()=>{
		// 组装数据
		let reqObj={}
		CellInfo.forEach(item=>{
			reqObj[item.name]=item.value
		})
		reqObj.salary=Number(reqObj.salary)
		let res=await ideal_info_saveReq(reqObj)
		if(res.data.code==0){
			uni.showToast({
				title: '保存成功',
				icon:"success"
			});
		}else{
			uni.showToast({
				title: '保存失败',
				icon:"success"
			});
		}
	}
</script>

<style lang="scss">
.select_requ{
	background: #f3f5f6;
	overflow-y: scroll;
	.fillin{
		position: relative;
		top: -100rpx;
		width: calc(100% - 100rpx);
		margin: 30rpx;
		background: #fff;
		padding: 20rpx;
		.text{
			color: #ccc;
		}
	}
	.deposit{
		position: relative;
		top: -100rpx;
		display: flex;
		justify-content: center;
		width: 100%;
		background: #fff;
		padding: 50rpx 0;
	}
}
</style>
